<template>
  <div class="resumeItem" v-if="data" :style="{ background: themes.backgroundColor }">
    <!-- <div class="isTop" @click="toDetail" v-if="data['is_urgent']" :style="{ backgroundImage: 'url(' + themes.backgroundImage + ')' }"></div> -->
    <image class="isTop" webp="true" @click="toDetail" src="/static/images/common/redjiaji.png" v-if="data['is_urgent'] && data.status == 1"></image>
    <div class="title-wrap" @click="toDetail">
      <div class="title">
        <span class="first" :style="{ color: themes.color, border: `2px solid ${themes.color}` }">
          {{ titleTagText }}
        </span>
        <span class="text">{{ $getTitleText(data["job_intention"]) }}</span>
      </div>
    </div>
    <div class="content" @click="toDetail">{{ data["content"] }}</div>
    <span class="city-info">期望城市：{{ data["city_list"] }}</span>
    <view class="album" v-if="data['picture_url'] && data['picture_url'].length > 0">
      <image
        @click="preview(index)"
        :key="index"
        :src="item"
        mode="aspectFill"
        fit="cover"
        v-for="(item, index) in getImages(data['picture_url'])"
        :style="{ width: '76px', height: '76px' }"
      ></image>
    </view>
    <div class="bottom" @click="toDetail">
      <div class="bl" v-if="itemType == 1">
        <i class="iconfont cyweizhi" v-if="data['address']"></i>
        <span class="s1" v-if="data['address']">{{ data["address"] }}</span>
        <span class="s2" v-if="data['address']">|</span>
        <span class="s3" v-if="data['distance']">{{ data["distance"] }} km&nbsp;</span>
        <span class="s2" v-if="data['distance']">&nbsp;|</span>
        <span class="s4">{{ data["show_time"] || "" }}</span>
      </div>
      <div class="bl2" v-else-if="itemType == 2">
        <i class="iconfont cya-1Arenyuanyonghu" v-if="data['name']"></i>
        <span v-if="data['name']">{{ data["name"] }} |</span>
        <span class="s3" v-if="data['distance']">{{ data["distance"] }} km&nbsp;</span>
        <span class="s2" v-if="data['distance']">&nbsp;|</span>
        <div class="create_time">{{ data["show_time"] || "" }}</div>
      </div>
      <div class="br" :style="{ background: themes.color }" @click.stop="contactEvent">
        <i class="iconfont cydianhua"></i>
        <span>{{ btnText }}</span>
      </div>
    </div>
    <contactPopup
      :title="contactTitle"
      :content="contentText"
      :btnTetx="contactBtnText"
      @submit="makePhoneCall"
      @close="showContactPopup = false"
      :show="showContactPopup"
    ></contactPopup>
  </div>
</template>

<script>
import contactPopup from "@/pages2/components/popup/contactPopup.vue";
export default {
  name: "job",
  components: { contactPopup },
  props: {
    type: {
      type: String,
      default: "1", //1=橙色；2=蓝色
    },
    titleTagText: {
      type: String,
      default: "招聘",
    },
    btnText: {
      type: String,
      default: "联系对方",
    },
    itemType: {
      type: String,
      default: "1", //1=求职卡片，2=招工卡片
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      albumWidth: 50,
      showContactPopup: false,
      contactTitle: "",
      contactBtnText: "",
      contentText: "",
      urls2: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
      ],
    };
  },
  computed: {
    themes() {
      switch (this.type) {
        case "2":
          // 红色
          return {
            backgroundColor: "#FFFCF8",
            backgroundImage: "/static/images/common/redjiaji.png",
            color: "#f96f6a",
          };
        case "3":
          // 橙色
          return {
            backgroundColor: "#fdfafa",
            backgroundImage: "/static/images/common/redjiaji.png",
            color: "#f76a6a",
          };

        default:
          return {
            backgroundColor: "linear-gradient(180deg, #ffffff 0%, #ffe7d3 100%)",
            backgroundImage: "/static/images/common/redjiaji.png",
            color: "#f96f6a",
          };
      }
    },
  },
  methods: {
    getImages(str) {
      return str.split(",");
    },
    toDetail() {
      this.$jump("/pages2/resumeDetail?id=" + this.data.id);
    },
    preview(index) {
      uni.previewImage({
        current: index,
        urls: this.data["picture_url"],
      });
    },
    async contactEvent() {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          let params = { purpose_id: this.data.id, type: 6 };
          let res = await this.$http.requestSync("/bills/get", params);

          if (res.code == 200) {
            let isBuyAndMobile =
              res.data.phone &&
              (this.$getStoraged("systemInfo").platform == "android" ||
                this.$getStoraged("systemInfo").platform == "ios" ||
                this.$getStoraged("systemInfo").platform == "devtools");
            if (isBuyAndMobile) {
              uni.makePhoneCall({
                phoneNumber: res.data["phone"].toString(), //电话号码
              });
              return false;
            } else if (res.data.phone) {
              if (
                this.$getStoraged("systemInfo").platform == "android" ||
                this.$getStoraged("systemInfo").platform == "ios" ||
                this.$getStoraged("systemInfo").platform == "devtools"
              ) {
                uni.makePhoneCall({
                  phoneNumber: res.data["phone"].toString(), //电话号码
                });
              } else {
                uni.showModal({
                  title: "查看手机号",
                  content: res.data["phone"].toString(),
                  success: function (res) {
                    if (res.confirm) {
                      console.log("用户点击确定");
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                    }
                  },
                });
              }

              return false;
            }
            this.$layer.message("如果用户积分够的话");
            // 如果用户积分够的话
            if (res.data.is_ok) {
              this.contentText = `您当前剩余${res.data["user_integral"]}积分可用，是否立即与对方联系？`;
              this.contactTitle = `与对方联系需要消耗${res.data["integral"]}积分`;
              this.contactBtnText = `联系对方`;
              this.showContactPopup = true;
            } else {
              this.contactTitle = `温馨提示`;
              this.contactBtnText = `去获取积分`;
              this.contentText = `当前您的积分不足，是否前往获取积分？`;
              this.showContactPopup = true;
            }
            this.contactInfo = res.data;
          }
        });
      });
    },
    async makePhoneCall() {
      let that = this;
      this.$throttle(async () => {
        if (this.contactInfo) {
          if (this.contactInfo.is_ok) {
            let params = {
              purpose_id: this.data.id,
              type: 6,
            };
            let res2 = await this.$http.requestSync("/bills/buy_phone", params);
            if (res2.code == 200) {
              if (
                this.$getStoraged("systemInfo").platform == "android" ||
                this.$getStoraged("systemInfo").platform == "ios" ||
                this.$getStoraged("systemInfo").platform == "devtools"
              ) {
                uni.makePhoneCall({
                  phoneNumber: res2.data["phone"].toString(), //电话号码
                });
                return false;
              } else if (res2.data.phone) {
                if (
                  this.$getStoraged("systemInfo").platform == "android" ||
                  this.$getStoraged("systemInfo").platform == "ios" ||
                  this.$getStoraged("systemInfo").platform == "devtools"
                ) {
                  uni.makePhoneCall({
                    phoneNumber: res2.data["phone"].toString(), //电话号码
                  });
                } else {
                  uni.showModal({
                    title: "查看手机号",
                    content: res2.data["phone"].toString(),
                    success: function (res) {
                      if (res.confirm) {
                        console.log("用户点击确定");
                        that.showContactPopup = false;
                      } else if (res.cancel) {
                        console.log("用户点击取消");
                        that.showContactPopup = false;
                      }
                    },
                  });
                }

                return false;
              }
            } else {
              that.showContactPopup = false;
              that.$layer.message(res2.message);
            }
          } else {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        } else {
          this.$layer.message("信息有误,请稍后重试");
        }
      });
    },
  },
  watch: {},
  created() {
    console.log();
  },
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.resumeItem {
  position: relative;
  width: 100%;
  border: 1px solid #ffd5d5;
  opacity: 1;
  box-sizing: border-box;
  padding: 15px 10px;
  margin-top: 11px;
  border-radius: 18px;
  .isTop {
    position: absolute;
    right: 0;
    top: 0;
    width: 39px;
    height: 34px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;

    .title {
      width: 273px;
      margin-top: 2px;

      .first {
        position: absolute;
        display: inline-block;
        width: 30px;
        height: 17px;
        // border: 2px solid #ff8822;
        border-radius: 4px;
        font-size: 11px;
        text-align: center;
        // color: #ff8822;
        transform: scale(0.9);
      }
      .text {
        display: inline-block;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #333333;
        opacity: 1;
        margin-left: 3px;
        text-indent: 33px;
        @include ells(2);
      }
    }
    .date {
      margin-top: 2px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 17px;
      color: #b9b9b9;
      opacity: 1;
    }
  }
  .content {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 18px;
    color: #333333;
    opacity: 1;
    margin: 13px auto 5px;
    box-sizing: border-box;
    padding-right: 15px;
    @include ells(2);
  }
  .city-info {
    height: 30px;
    line-height: 30px;
    padding: 0 6px;
    font-size: 11px;
    background: rgba(255, 136, 34, 0.1);
    border-radius: 3px;
    color: #ff8822;
  }
  .album {
    @include flex;
    flex-wrap: wrap;
    image {
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 6px;
    }
    & > image:nth-child(4) {
      margin-right: 0px;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: #999999;
    opacity: 1;
    padding-top: 10px;
    border-top: 1px solid #e4e4e4;
    height: 31px;
    width: 100%;
    .bl {
      display: flex;
      max-width: 250px;
      // @include ells(1);
      .iconfont {
        display: inline-block;
        font-size: 11px;
        margin-right: 5px;
      }
      .s1 {
        display: inline-block;
        width: 50%;
        height: 100%;
        flex-wrap: nowrap;
        @include ells(1);
        margin-right: 3px;
      }
      .s2 {
        margin-right: 3px;
        margin-left: 3px;
      }
      .s4 {
        height: 100%;
        @include ells(1);
      }
    }
    .bl2 {
      display: flex;
      max-width: 250px;
      .iconfont {
        display: inline-block;
        font-size: 11px;
        margin-right: 5px;
      }
      .s1 {
        margin-right: 3px;
      }
      .s2 {
        margin-right: 3px;
      }
      .create_time {
        box-sizing: border-box;
        padding: 1px 6px;
        height: 18px;
        // background: #2c9bfd47;
        // border-radius: 9px;
        font-size: 11px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        // color: #2c9cfd;
        // text-align: center;
        // line-height: 18px;
        // margin-top: 5px;
      }
    }
    .br {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      width: 92px;
      height: 27px;
      // background: #ff8822;
      opacity: 1;
      border-radius: 14px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 17px;
      color: #ffffff;
      text-align: center;
      padding: 5px 10px;
      box-sizing: border-box;
      .iconfont {
        margin: 0 5px 0 0;
      }
    }
  }
}
</style>
